<template>
  <div class="coupon-container">
    <van-collapse v-model="activeNames" :border="false" :is-link="false">
      <van-collapse-item>
        <template #value>
          <div class="coupon-content">
            <div class="left">
              <div class="noblank-box">
                <div v-if="item.source == 1 || item.source == 4" class="tag">
                  <p>会员专属</p>
                </div>

                <div class="font-content">
                  <div class="top-part">
                    <div class="price">
                      <template v-if="item.price > 0">
                        <p v-if="item.price > 0" class="price_num">
                          {{ item.price }}
                        </p>
                        <div class="yuan">元</div>
                      </template>
                    </div>
                    <div class="title">{{ item.couponName }}</div>
                  </div>
                  <div class="bottom-part">
                    <div class="fit">
                      <template v-if="item.consumeThreshold > 0">
                        (满{{ item.consumeThreshold }}可用)
                      </template>
                      <template v-else> 无门槛 </template>
                    </div>
                    <div class="rules-box">
                      <div class="rule">规则</div>
                      <div class="triangle"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="blank-box1"></div>
              <div class="blank-box2"></div>
            </div>
            <div
              class="right"
              :class="[{ used: couponBtnName.type > 2 }]"
              @click.stop="useCoupon(item.couponType)"
            >
              {{ couponBtnName.title }}
            </div>
            <div class="tips">
              <div></div>
            </div>
          </div>
        </template>
        <template>
          <div class="rule_content">
            <van-field
              v-model="item.rule"
              rows="1"
              readonly
              autosize
              type="textarea"
            />
          </div>
        </template>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: "coupon",
  props: {
    item: {
      type: Object, //source 1 系统 2 自己领 3 订单赠送 4抽奖
    },
    status: {
      type: Number,
      default: 1, //1 未使用 2 已使用 3 过期 4 作废
    },
  },

  data() {
    return {
      activeTriangles: {}, // 存储每个index的显示状态
      activeNames: ["0"],
    };
  },
  watch: {},
  computed: {
    couponBtnName() {
      if (this.status == 1) {
        if (this.item.couponType != 3) {
          return {
            type: 1,
            title: "去使用",
          }; //去使用
        } else {
          return {
            type: 2,
            title: "去核销",
          };
        }
      } else if (this.status == 2) {
        return {
          type: 3,
          title: "已使用",
        };
      } else if (this.status == 3) {
        return {
          type: 4,
          title: "已过期",
        };
      } else {
        return {
          type: 5,
          title: "已作废",
        };
      }
    },
  },
  methods: {
    handleTriangle(index) {
      // 切换对应index的显示状态
      this.$set(this.activeTriangles, index, !this.activeTriangles[index]);
    },
    handleStatusTitle(id) {
      switch (this.couponList.find((item) => item.id === id).status) {
        case 0:
          return "未使用";
        case 1:
          return "已使用";
        case 2:
          return "已失效";
        default:
          return "";
      }
    },
    useCoupon(type) {
      if (this.couponBtnName.type > 2) return;
      if (type == 3) {
        //线下核销
        this.$emit("showQR", this.item);
      } else {
        this.$router.push({
          path: "/home",
        });
      }
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
/deep/ .van-collapse-item__title {
  padding: 0;
  margin-top: 50px;
  i {
    display: none;
  }
}
/deep/ .van-collapse-item__content {
  padding: 0;
  .van-field__control {
    font-size: 30px;
    color: #3c3c3c;
  }
}

/deep/ .van-field {
  padding: 0;
  background: transparent;
}
.coupon-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // margin: 50px 0 0 0;
  position: relative;

  .left {
    position: relative;
    width: calc(100% - 350px);
    border-radius: 32px 0 0 32px;
    background: linear-gradient(to top, #b6d0fa, #fefeff);

    .noblank-box {
      position: relative;
      overflow: hidden;

      .tag {
        position: absolute;
        top: 20px;
        left: -200px;
        width: 500px;
        height: 70px;
        background-color: #2b5ac3;
        rotate: -45deg;
        transform-origin: center center; // 设置旋转中心点

        p {
          font-size: 30px;
          color: white;
          text-align: center;
          line-height: 70px;
          margin: 0;
        }
      }

      .no-tag {
        background-color: #4e5159;
      }

      .font-content {
        display: flex;
        flex-direction: column;
        align-items: center;

        .top-part {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 50px 0 0 50px;

          .price {
            display: flex;
            align-items: baseline;
            box-sizing: border-box;

            // p {
            //   color: #214186;
            //   font-weight: 600;
            // }

            .price_num {
              color: #214186;
              font-size: 80px;
              font-weight: bold;
            }

            .no_price {
              color: #214186;
              font-size: 40px;
              font-weight: bold;
              white-space: nowrap;
            }

            .yuan {
              width: 60px;
              height: 60px;
              text-align: center;
              line-height: 60px;
              font-size: 30px;
              color: white;
              border-radius: 50%;
              border: 3px solid white;
              background: linear-gradient(to top, #204086, #4c7bcb);
              transform: translateX(-20px);
            }
          }

          .no-price {
            p {
              color: #4f5159;
            }

            .yuan {
              background: #4f5159;
            }
          }

          .title {
            font-size: 65px;
            color: #224388;
            font-weight: 600;
            padding: 0 20px;
            text-align: justify;
          }

          .no-title {
            color: #52545b;
          }
        }

        .bottom-part {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          padding: 0 20px 20px 50px;

          .fit {
            color: #3364c8;
            font-size: 38px;
          }

          .no-fit {
            color: #4f5159;
          }

          .rules-box {
            display: flex;
            align-items: center;

            .rule {
              color: #3364c8;
              font-size: 38px;
              font-weight: 600;
            }

            .no-rule {
              color: #4f5159;
            }

            .triangle {
              width: 0;
              height: 0;
              border-top: 30px solid #3364c8;
              border-right: 15px solid transparent;
              border-left: 15px solid transparent;
              margin: 0 20px;
              transition: transform 0.3s ease-in-out;
            }

            .no-triangle {
              border-top: 30px solid #52545b;
            }

            .rotated {
              transform: rotate(-180deg);
            }
          }
        }
      }
    }

    .blank-box1 {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transform: translate(50%, -50%);
      background-color: #f6f8f8;
    }

    .blank-box2 {
      position: absolute;
      right: 0;
      bottom: 0 !important;
      width: 50px;
      height: 50px;
      transform: translate(50%, 50%);
      border-radius: 50%;
      background-color: #f6f8f8;
    }
  }

  .no-left {
    background: linear-gradient(to top, #caccd3, #fefeff);
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    color: white;
    width: 350px;
    background: linear-gradient(to top, #6797ea, #3472c4);
    border-radius: 0 32px 32px 0;
  }

  .used {
    text-decoration: line-through;
  }

  .no-right {
    background: linear-gradient(to top, #8f9095, #616569);
  }

  .tips {
    width: 92%;
    background-color: white;
    margin: 0 auto;

    ul {
      padding: 20px;

      li {
        color: #63676b;
        font-size: 38px;
      }
    }
  }
}
.rule_content {
  padding: 15px;
  background-color: #eef7fe;
}
</style>
